// .toolBar{
//   position: fixed;
//   width: 300px;
//   height: 100%;
//   right:0;
//   top:0;
//   background: #7a6e6e; 
//   .toolCon{
//       width: 294px;
//       height: 100%;
//       position: absolute;
//       left: 6px;
//       top: 0;
//       background: bisque;
//   }
//   .toolBtn{
//       width: 35px;
//       height: 35px;
//       position: absolute;
//       left: -29px;
//       top: 0;
//       &.list{
//           background: url(../images/cross.png) #7a6e6e;
//           background-size: cover;
//         }
//         &.cross{
           
//             background: url(../images/list.png) #7a6e6e;
//             background-size: cover;
//         }
//   }
//     .toolNav{
//         width: 35px;
//         height: 200px;
//         background:orange;
//         position: absolute;
//         left: -29px;
//         top: 30%;
//         >ul{
//             height: 245px;
//             >li{
//                 width: 35px;
//                 height: 35px;
//                 background: #7a6e6e;
//                 >p{
//                     width: 35px;
//                     height: 35px;
//                     background: url('/images/toolbars.png') #7a6e6e -87px -174px;
//                 }
//                 >i{
//                     position: absolute;
//                     width: 62px;
//                     height: 35px;
//                     left: 35px;
//                     background: pink;
//                     top: 0;
//                     text-align: center;
//                     line-height: 35px;
//                 }
//             }

//         }
//     }
// }
.header{
    // 头部导航栏
    .headerNav{
        background-color: #eaeaea;
        height: 30px;
        .navMain{
            width: 1200px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            .mainLeft{
                float: left;
                width: 200px;
                height: 30px;
                >h5{
                    float: left;
                }
                >p{
                    float: left;
                    color: #666;
                    margin-left: 4px;
                    a.login{
                        border-left: 1px solid #b3aeae;
                        padding-left: 4px;
                    }
                }
            }
            .mainRight{
                float: right;
                height: 30px;
                font-size: 0;
                >a{
                    padding: 0 10px;
                    font-size: 12px;
                    & + a{
                        border-left: 1px solid #b3aeae;
                    }
                }
            }
        }
    }
    // 头部logo栏
    .logoCon{
        width: 1200px;
        margin: 0 auto;
        .clearFix();
        .logo{
            float: left;
            width: 175px;
            height: 56px;
            line-height: 56px;
            margin: 25px 45px;
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .search{
            float: right;
            margin-top: 35px;
            .clearFix();
            >input{
                float: left;
                width: 490px;
                height: 32px;
                line-height: 32px;
                box-sizing: border-box;
                border: 3px solid #ea4a36;
            }
            >button{
                float: left;
                width: 68px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: #ea4a36;
                color: #fff;
                border: none;
                font-weight: bold;
            }
        }
    }
}
.typeNav{
    .clearFix();
    border-bottom: 2px solid #e1251b;
    .navCon{
        width: 1200px;
        margin: 0 auto;
        .navLeft{
            float: left;
            width: 210px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #e1251b;
            >h3{
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }
        }
        .navRight{
            height: 50px;
            line-height: 50px;
            float: left;
            >a{
                margin:0px 22px;
                font-size: 16px;
                color: #333;
                
            }
        }
    }
}
.content{
    width: 1200px;
    margin: 15px auto 0;
    .conPoin{
        padding: 9px 15px 9px 0;
        >i{
            margin: 0 3px;
        }
    }
    .infoWrap{
        margin: 5px 0 15px;
        .clearFix();
        .prevViewWrap{
            float: left;
            width: 400px;
            .prevView{
                width: 400px;
                height: 400px;
                border: 1px solid #dfdfdf;
                position: relative;
                .zoomImgBox{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        .mask{
                            width: 200px;
                            height: 200px;
                            border: 1px solid #ddd;
                            background-color: rgba(255,255,255,0.5);
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        
                }
                .bigImgBox{
                    width: 400px;
                    height: 400px;
                    border: 1px solid #ddd;
                    position: absolute;
                    left: 420px;
                    top: 0;
                    overflow: hidden;
                }
            }
            .thumbnail{
                width: 100%;
                margin-top: 5px;
                >a{
                    display: inline-block;
                    line-height: 54px;
                    text-align: center;
                    width: 10px;
                    height: 54px;
                    border: 1px solid #CCC;
                    background-color: #EBEBEB;
                    &.prev{
                        float: left;
                        margin-right:4px;
                    }
                    &.next{
                        float: right;
                    }
                }
                .list{
                    overflow: hidden;
                    width: 372px;
                    height: 56px;
                    float: left;
                    position: relative;
                    ul{
                        .clearFix();
                        width: 9999px;
                        position: absolute;
                        li{
                            float: left;
                            width: 50px;
                            height: 50px;
                            border: 1px solid #CCC;
                            padding: 2px;
                            margin-right: 20px;
                            >img{
                                width: 100%;
                                height: 100%;
                            }
                         }
                    }
                }
            }
        }
        .info{
            float: right;
            width: 700px;
            .infoTop{
                >h3{
                    font-size: 14px;
                    line-height: 21px;
                    margin-top: 15px;
                }
                >p{
                    color: #e12228;
                    margin-top: 15px;
                }
                .priceCon{
                    margin-left: 10px;
                    color: #c12;
                    >i{
                        font-size: 18px;
                    }
                    >em{
                        font-size: 28px;
                    }
                  
                }
                .priceArea{
                    background: #fee9ec;
                    padding: 7px;
                    margin-top: 10px;
                    line-height: 28px;
                    >div{
                        >p{
                            float: left;
                        }
                        &.title{
                            margin-right: 15px;
                        }
                    }
                    .priceTop{
                        .clearFix();
                        >p{
                            float: left;
                            &.remark{
                                float: right;
                            }
                        }
                    }
                    .priceBottom{
                        .clearFix(); 
                        .text{
                            margin-left: 10px;
                            width: 520px;
                            >em{
                                background: #c81623;
                                padding: 3px;
                                color: #fff;
                            }
                            >span{
                                color: #999;
                            }
                        }
                    }
                }
                .support{
                    border-bottom: 1px solid #ededed;
                    padding-bottom: 5px;
                    >div{
                        .clearFix();
                        margin: 10px 0;
                        line-height: 28px;
                        >p{
                            float: left;
                            &.title{
                                margin-right: 15px;
                            }
                            &.text{
                                color: #999;
                            }
                        }
                    }
                }

            }
            .choose{
                margin-top: 10px;
                line-height: 28px;
                .choosed{
                    >mark{
                        display: inline-block;
                        height: 30px;
                        background: snow;
                        border: 1px solid #ddd;
                        padding: 0 20px;
                        margin-right: 20px;
                        line-height: 30px;
                        >a{
                            margin-left: 20px;
                            color: red;
                        }
                    }
                }
                .chooseArea{
                    >dl{
                        margin: 13px 0;
                        .clearFix();
                        >dt{
                            margin-right: 15px;
                            float: left;
                        }
                        >dd{
                            padding: 2px 14px;
                            margin-right: 5px;
                            float: left;
                            line-height: 24px;
                            color: #666;
                            border-top: 1px solid #eee;
                            border-left: 1px solid #eee;
                            border-bottom: 1px solid #bbb;
                            border-right: 1px solid #bbb;
                            &:nth-of-type(1){
                                color: red;
                            }
                        } 
                    }
                }
                .addCar{
                    float: left;
                    width: 55px;
                    height: 40px;
                    border: 1px solid #ededed;
                    font-size: 0;
                    position: relative;
                    >.add{
                        line-height: 10px;
                        width: 20px;
                        height: 20px;
                        font-size: 15px;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                    >.sea{
                        line-height: 10px;
                        width: 20px;
                        height: 20px;
                        font-size: 15px;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
                .shop{
                    width: 152px;
                    float: left;
                    margin:0 10px;
                    height: 40px;
                    font-size: 16px;
                    text-align: center;
                    color: #fff;
                    padding: 2px 14px;
                    line-height: 36px;
                    background: #e1251b;
                    box-sizing: border-box;
                }
            }
            }

        }
    .detail{
        width: 1200px;
        margin: 30px auto 0;
        .clearFix();
        aside{
            float: left;
            width: 210px;
            border: 1px solid #ccc;
            .tabBtns{
                height: 40px;
                line-height: 40px;
                >h4{
                    float: left;
                    width: 105px;
                    height: 37px;
                    line-height: 37px;
                    text-align: center;
                    border-bottom:1px solid #ccc;
                    border-top:3px solid #fff;
                    &.active{
                        border-top:3px solid #e1251b;
                    }
                }
            }
            .tabContents{
                padding: 10px;
                >div{
                    display: none;
                    &.active{
                        display: block;
                    }
                    .partList{
                        .clearFix();
                        li{
                            width:50%;
                            float: left;
                            border-bottom: 1px dashed #ededed;
                            line-height: 28px;
                            
                        }
                    }
                    .goodList{
                        li{
                            border-bottom: 2px;
                            margin: 5px 0 15px;
                            border-bottom: 1px solid#ededed;
                            .imgBox{
                                text-align: center;
                                img{
                                    width: 152px;
                                }
                            }
                            p{
                                &.partPrice{
                                    font-size: 16px;
                                    color: #c81623;
                                }
                            }
                            .addCar{
                                text-align: center;
                                margin: 5px 0;
                                >a{
                                    border:1px solid #8c8c8c;
                                    color: #8c8c8c;
                                    padding: 2px 14px;
                                    line-height: 18px;
                                    width: 90px;   
                                }
                            }
                        }
                    }
                }
            }
        }
        .detailWarp{
            float: right;
            width: 980px;
            .fitting{
                border: 1px solid #ddd;
                margin-bottom: 15px;
                >h4{
                    background: #f1f1f1;
                    color: #333;
                    padding: 5px 0 5px 15px;
                }
                .goodSuits{
                    height: 170px;
                    padding-top: 10px;
                    .master{
                        width: 127px;
                        height: 165px;
                        text-align: center;
                        float: left;
                        position: relative;
                       
                        >img{
                            width: 87px;
                        }
                        >p{
                            font-size: 16px;
                            color: #c81623;
                        }
                        i{
                            position: absolute;
                            top: 48px;
                            right: -25px;
                            font-size: 16px;
                        }
                    }
                    ul{
                        float: left;
                        width: 668px;
                        height: 165px;
                        >li{
                            float: left;
                            width: 127px;
                            margin: 0 20px;
                            text-align: center;
                            >img{
                                width: 120px;
                                height: 130px;
                            }
                        }
                    }
                    .result{
                        float: left;
                        border-left: 1px solid #ddd;
                        width: 153px;
                        height: 165px;
                        padding-left: 20px;
                        >div{
                            margin: 10px 0;
                        }
                        >h5{
                            font-weight: bold;
                            margin-bottom: 10px;
                        }
                        >p{
                            color: #B1191A;
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                        >button{
                            padding: 10px 25px;
                            font-size: 16px;
                            color: white;
                            background: #e1251b;
                            border: none;
                        }
                    }
                }
            }
            .intro{
                .tabBtns{
                    background: #ededed;
                    border: 1px solid #ddd;
                    .clearFix();
                    >li{
                        float: left;
                        height: 40px;
                        // background: #fff;
                        border-right: 1px solid #ddd;
                        line-height: 40px;
                        padding: 0 11px;
                        &.active{
                             background: #e1251b;
                             color: #fff;
                        }
                    }
                }
                .tabContents{
                    >div{
                        display: none;
                        &.active{
                            display: block;
                        }
                        li{
                            margin: 10px 0;
                        }
                    }
                }
            }
        }
    }
    
    }
//清除浮动
.clearFix(){
    //兼容性问题
    *zoom: 1;
    &::after{
      content: '';
      display: block;
      clear: both;
    }
}